import React, { memo } from 'react'

import dayjs from "dayjs"
import { getHourOrMinte } from "@/utils/dateUtil"

import sleepImg from "@/assets/images/hospital/sleep.png"

function Sleep(props) {
    return (
        <div className='hosSleepBox'>

            {/* 头部标题 */}
            <div className='hosSleepTop'>
                <div className='hosSleepLeft'>
                    <img className='hosSleepIcon' src={sleepImg} alt='' />
                    <span className='hosSleepTit'>睡眠</span>
                </div>
                <div className='hosSleepRight'>{props.date && dayjs(props.date).format("MM月DD日")}</div>
            </div>


            {
                props.sleep && JSON.stringify(props.sleep) !== '{}' ? (
                    <div className='hosSpContent'>
                        <div className='hosSpCtLeft'>
                            <div className='hosSpCtTit'>总睡眠时长</div>
                            <div className='hosSpCtNum'>
                                <span className='hosSpCtCount'>{props.sleep.duration && getHourOrMinte(props.sleep.duration, 'hour')}</span>
                                <span className='hosSpCtUnit'>小时</span>
                                <span className='hosSpCtCount'>{props.sleep.duration && getHourOrMinte(props.sleep.duration, 'minte')}</span>
                                <span className='hosSpCtUnit'>分钟</span>
                            </div>
                        </div>
                    </div>
                ) : (
                    <div className='sleepEmptyBox'>无数据</div>
                )
            }
        </div>
    )
}

export default memo(Sleep);
